<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>${fns:getConfig('productName')}</title>
	<meta name="decorator" content="default"/>
  	<script type="text/javascript">
		$(document).ready(function() {
			var clientWidth = document.body.clientWidth;
			var frameWidth = clientWidth - 192;
			$("#mainFrame").attr("width",frameWidth);
			$("#menu a.menu").click(function(){
				$("#menu li.menu").removeClass("active");
				$(this).parent().addClass("active");
			});
		});
	</script>
</head>
<body>
    <div id="navbar" class="navbar navbar-default">
        <div class="navbar-container" id="navbar-container">

            <div class="navbar-header pull-left">
                <a href="#" class="navbar-brand">
                    <small>
                        <i class="fa fa-leaf"></i>
                        ${fns:getConfig('productName')}
                    </small>
                </a>
            </div>
            <div class="navbar-header pull-left">
                <ul id="menu" class="nav">
                    <c:set var="firstMenu" value="true"/>
                    <c:forEach items="${fns:getMenuList()}" var="menu" varStatus="idxStatus">
                        <c:if test="${menu.parent.id eq '1' &&menu.isShow eq '1'}">
                            <li class="menu ${firstMenu?' active':''}"><a class="menu" href="${ctx}/sys/menu/tree?parentId=${menu.id}" target="menuFrame" >${menu.name}</a></li>
                            <c:if test="${firstMenu}">
                                <c:set var="firstMenuId" value="${menu.id}"/>
                            </c:if>
                            <c:set var="firstMenu" value="false"/>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
            <div class="navbar-buttons navbar-header pull-right" role="navigation">
                <ul class="nav ace-nav">
                    <li class="grey" style="display: none;">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="ace-icon fa fa-tasks"></i>
                            <span class="badge badge-grey">4</span>
                        </a>

                        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-check"></i>
                                4 Tasks to complete
                            </li>

                            <li class="dropdown-content">
                                <ul class="dropdown-menu dropdown-navbar">
                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                <span class="pull-left">Software Update</span>
                                                <span class="pull-right">65%</span>
                                            </div>

                                            <div class="progress progress-mini">
                                                <div style="width:65%" class="progress-bar"></div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                <span class="pull-left">Hardware Upgrade</span>
                                                <span class="pull-right">35%</span>
                                            </div>

                                            <div class="progress progress-mini">
                                                <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                <span class="pull-left">Unit Testing</span>
                                                <span class="pull-right">15%</span>
                                            </div>

                                            <div class="progress progress-mini">
                                                <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                <span class="pull-left">Bug Fixes</span>
                                                <span class="pull-right">90%</span>
                                            </div>

                                            <div class="progress progress-mini progress-striped active">
                                                <div style="width:90%" class="progress-bar progress-bar-success"></div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown-footer">
                                <a href="#">
                                    See tasks with details
                                    <i class="ace-icon fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="purple" style="display: none;">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="ace-icon fa fa-bell icon-animated-bell"></i>
                            <span class="badge badge-important">8</span>
                        </a>

                        <ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-exclamation-triangle"></i>
                                8 Notifications
                            </li>

                            <li class="dropdown-content">
                                <ul class="dropdown-menu dropdown-navbar navbar-pink">
                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                        <span class="pull-left">
                                                            <i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
                                                            New Comments
                                                        </span>
                                                <span class="pull-right badge badge-info">+12</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <i class="btn btn-xs btn-primary fa fa-user"></i>
                                            Bob just signed up as an editor ...
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                        <span class="pull-left">
                                                            <i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
                                                            New Orders
                                                        </span>
                                                <span class="pull-right badge badge-success">+8</span>
                                            </div>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#">
                                            <div class="clearfix">
                                                        <span class="pull-left">
                                                            <i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
                                                            Followers
                                                        </span>
                                                <span class="pull-right badge badge-info">+11</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown-footer">
                                <a href="#">
                                    See all notifications
                                    <i class="ace-icon fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="green" style="display: none;">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
                            <span class="badge badge-success">5</span>
                        </a>

                        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-envelope-o"></i>
                                5 Messages
                            </li>

                            <li class="dropdown-content">
                                <ul class="dropdown-menu dropdown-navbar">
                                    <li>
                                        <a href="#" class="clearfix">
                                            <img src="dist/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
                                                    <span class="msg-body">
                                                        <span class="msg-title">
                                                            <span class="blue">Alex:</span>
                                                            Ciao sociis natoque penatibus et auctor ...
                                                        </span>

                                                        <span class="msg-time">
                                                            <i class="ace-icon fa fa-clock-o"></i>
                                                            <span>a moment ago</span>
                                                        </span>
                                                    </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="clearfix">
                                            <img src="dist/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
                                                    <span class="msg-body">
                                                        <span class="msg-title">
                                                            <span class="blue">Susan:</span>
                                                            Vestibulum id ligula porta felis euismod ...
                                                        </span>

                                                        <span class="msg-time">
                                                            <i class="ace-icon fa fa-clock-o"></i>
                                                            <span>20 minutes ago</span>
                                                        </span>
                                                    </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="clearfix">
                                            <img src="dist/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
                                                    <span class="msg-body">
                                                        <span class="msg-title">
                                                            <span class="blue">Bob:</span>
                                                            Nullam quis risus eget urna mollis ornare ...
                                                        </span>

                                                        <span class="msg-time">
                                                            <i class="ace-icon fa fa-clock-o"></i>
                                                            <span>3:15 pm</span>
                                                        </span>
                                                    </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="clearfix">
                                            <img src="dist/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" />
                                                    <span class="msg-body">
                                                        <span class="msg-title">
                                                            <span class="blue">Kate:</span>
                                                            Ciao sociis natoque eget urna mollis ornare ...
                                                        </span>

                                                        <span class="msg-time">
                                                            <i class="ace-icon fa fa-clock-o"></i>
                                                            <span>1:33 pm</span>
                                                        </span>
                                                    </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="clearfix">
                                            <img src="dist/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" />
                                                    <span class="msg-body">
                                                        <span class="msg-title">
                                                            <span class="blue">Fred:</span>
                                                            Vestibulum id penatibus et auctor  ...
                                                        </span>

                                                        <span class="msg-time">
                                                            <i class="ace-icon fa fa-clock-o"></i>
                                                            <span>10:09 am</span>
                                                        </span>
                                                    </span>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown-footer">
                                <a href="inbox.html">
                                    See all messages
                                    <i class="ace-icon fa fa-arrow-right"></i>
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="light-blue">
                        <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                            <img class="nav-user-photo" src="${ctxStatic}/images/user.jpg" alt="Jason's Photo" />
                                    <span class="user-info">
                                        <small>Welcome,</small>
                                        ${fns:getUser().loginName}
                                    </span>

                            <i class="ace-icon fa fa-caret-down"></i>
                        </a>

                        <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                            <li>
                                <a href="${ctx}/sys/user/info?menuId=14941e3825a94b7f9a8629e70f0734db" target="mainFrame">
                                    <i class="ace-icon fa fa-cog"></i>
                                    个人信息
                                </a>
                            </li>

                            <li>
                                <a href="${ctx}/sys/user/modifyPwd?menuId=b95374fa94dd494ca020595353e65346" target="mainFrame">
                                    <i class="ace-icon fa fa-user"></i>
                                    修改密码
                                </a>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="${ctx}/logout">
                                    <i class="ace-icon fa fa-power-off"></i>
                                    退出
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div><!-- /.navbar-container -->
    </div>
	<div class="main-container container-fluid">
		<div id="content" class="row-fluid">
			<iframe id="menuFrame" name="menuFrame" src="${ctx}/sys/menu/tree?parentId=${firstMenuId}" style="overflow:visible;" scrolling="no" frameborder="no" width="189" height="200"></iframe>
			<iframe id="mainFrame" name="mainFrame" src=""  style="overflow:visible;margin-left: -6px;border-left: 1px #B9C0C0 solid;" scrolling="yes" frameborder="no" height="200"></iframe>
		</div>
		<!--/.main-content-->
        <div id="footer" style="height: 30px;background: #dddddd;text-align: center;padding-top: 5px;">
            Copyright &copy; 2012-${fns:getConfig('copyrightYear')} ${fns:getConfig('productName')} - Powered By <a href="https://github.com/thinkgem/jeesite" target="_blank">JeeSite</a> ${fns:getConfig('version')}
        </div>
    </div>
	<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-small btn-inverse"> <i class="icon-double-angle-up icon-only bigger-110"></i> </a>
    <script type="text/javascript">
        $(document).ready(function(){
        });

        var leftWidth = "160"; // 左侧窗口大小
        function wSize(){
            var minHeight = 500, minWidth = 980;
            var strs=getWindowSize().toString().split(",");
            $("#menuFrame, #mainFrame, #openClose").height((strs[0]<minHeight?minHeight:strs[0])-$("#header").height()-$("#footer").height()-50);
            if(strs[1]<minWidth){
                $("#main").css("width",minWidth-10);
                $("html,body").css({"overflow":"auto","overflow-x":"auto","overflow-y":"auto"});
            }else{
                $("#main").css("width","auto");
                $("html,body").css({"overflow":"hidden","overflow-x":"hidden","overflow-y":"hidden"});
            }
            $("#right").width($("#content").width()-$("#left").width()-$("#openClose").width()-5);
        }
    </script>
    <script src="${ctxStatic}/common/js/wsize.min.js" type="text/javascript"></script>
	</body>
</html>